
import React, { Component } from 'react'
import {
    Row , Col 
}  from "antd"
import * as  echarts from "echarts"
import { ajax } from "../../api";
export default class SalaryFenxi extends Component {
    componentDidMount(){
        ajax.getuserlist()
        .then(res=>{
            if(res.code==200){
                this.initUserChart1(res.result)
                this.initUserChart2(res.result)
            }
        })
    }
    initUserChart1 = (list)=>{
        var myChart = echarts.init(document.getElementById('mainone'));
        var option = {
            title: {
                text: '员工薪资分布',
                left: 'center'
            },
            tooltip: {},
            legend: {
                data:['人数'],
                left:'left'
            },
            xAxis: {
                data: ["<5k","5k-7k","7k-9k","9k-11k","11k-13k",">13k"]
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'line',
                showBackground: true,
                data: [
                    list.filter(item=>item.salary<5000).length,
                    list.filter(item=>item.salary>=5000&&item.salary<7000).length,
                    list.filter(item=>item.salary>=7000&&item.salary<9000).length,
                    list.filter(item=>item.salary>=9000&&item.salary<11000).length,
                    list.filter(item=>item.salary>=11000&&item.salary<13000).length,
                    list.filter(item=>item.salary>=13000).length,
                ]
            }]
        };
        myChart.setOption(option);
    }
    

    initUserChart2 = (list)=>{
        var myChart = echarts.init(document.getElementById('maintwo'));
        var option = {
            title: {
                text: '员工的薪资分析',
                subtext: '员工薪资',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '薪资占比',
                    type: 'pie',
                    radius: '60%',
                    avoidLabelOverlap: false,
                    data: [
                        {value:list.filter(item=>item.salary<5000).length,name:'<5k'},
                        {value:list.filter(item=>item.salary>=5000&&item.salary<7000).length,name:'5k-7k'},
                        {value:list.filter(item=>item.salary>=7000&&item.salary<9000).length,name:'7k-9k'},
                        {value:list.filter(item=>item.salary>=9000&&item.salary<11000).length,name:'9k-11k'},
                        {value:list.filter(item=>item.salary>=11000&&item.salary<13000).length,name:'11k-13k'},
                        {value:list.filter(item=>item.salary>=13000).length,name:'>13k'},
                    ],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);
    }
    render() {
        return (
            <div>
                <h2>员工薪资信息分析</h2>
                <Row style={{width:'100%'}}>
                    <Col span={11} offset={0}>
                        <div className="box" id="mainone" style={{paddingTop:10,width:'100%',height:400,border:'1px solid #ddd'}}></div>
                    </Col>
                    <Col span={11} offset={1}>
                        <div className="box" id="maintwo" style={{paddingTop:10,width:'100%',height:400,border:'1px solid #ddd'}}></div>
                    </Col>
                </Row>
            </div>
        )
    }
}
